<template>
  <div>
    <div>
      <div :class="['wx-card-style', type,]" :style="`--wx-card-w: ${width}; --wx-card-h: ${height}`">
        <div>
          <div v-if="!$scopedSlots.title && title" class="wx-card-title">{{ title }}</div>
          <slot v-else-if="$scopedSlots.title" name="title"></slot>
        </div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wangxiaoCard",
  props: {
    /** 类型
     * other (默认)
     * info
     * warning
     * error
     * success
     */
    type: {
      type: String,
      default: "other",
    },

    title: {
      type: [String, Number],
      default: "",
    },

    width: {
      type: String,
      default: "auto",
    },
    height: {
      type: String,
      default: "auto",
    }
  },

  data() {
    return {
      dataList: [],
    };
  },
  created() {

  }
};
</script>

<style scoped>
.wx-card-style {
  width: var(--wx-card-w);
  height: var(--wx-card-h);
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
}

.info {
  background-color: #FAFAFB;
}

.success {
  background-color: #67C23A;
  color: #fff;
}

.warning {
  background-color: #ffb443;
  color: #fff;

}

.error {
  background-color: #F56C6C;
  color: #fff;

}

.other {
  background-color: #ffffff;
}

.wx-card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-bottom: 20px;
}
</style>